/*
 * @Author: Wilbur
 * @Date: 2018-11-20 13:49:22
 * @Last Modified by: Wilbur
 * @Last Modified time: 2018-11-22 16:07:20
 */
<template>
    <div class="container add-class-container">
        <div class="operation-wrapper">
            <el-button
                type="primary"
                style="padding: 0;"
                size="small">
                <a
                    style="color: #fff;padding: 9px 15px;"
                    href="//cdn.zsdx.cn/admin/file/task/base_class_import.xlsx"
                    download="">下载demo表格</a>
            </el-button>
            <el-button
                style="padding: 0;"
                type="default"
                :disabled="school_id == '' || academy_no == ''"
                size="small">
                <label
                    style="padding: 9px 15px;display: block;">
                    导入数据
                    <input
                        type="file"
                        @change="e=> {fnUploadExcelData(e)}"
                        style="display: none;">
                </label>
            </el-button>
            <el-button
                type='text'
                size="small"><strong style="color: #1890FF;font-size: 14px;">第二步：</strong></el-button>
        </div>
        <div class="content-wrapper">
            <el-row
                class="steps-desc-wrap"
                :gutter="20">
                <el-col
                    class="filter-item"
                    :md="{ span: 24 }"
                    :sm="{ span: 24 }">
                    <p><strong>第一步：</strong>选择城市学校学院</p>
                </el-col>
            </el-row>
            <el-row
                class="search-wrapper"
                :gutter="20">
                <el-form
                    label-position="left"
                    label-width="84px"
                    size="small">
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="选择城市：">
                            <el-select
                                v-model="city_id"
                                filterable
                                @change="fnCityChange"
                                placeholder="请选择">
                                <el-option
                                    v-for="item in cityList"
                                    :key="item.city_id"
                                    :label="item.name"
                                    :value="item.city_id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="选择学校：">
                            <el-select
                                v-model="school_id"
                                filterable
                                @change="fnSchoolChange"
                                placeholder="请选择">
                                <el-option
                                    v-for="item in schoolList"
                                    :key="item.school_id"
                                    :label="item.name"
                                    :value="item.school_id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="选择学院：">
                            <el-select
                                v-model="academy_no"
                                filterable
                                @change="fnAcademyChange"
                                placeholder="请选择">
                                <el-option
                                    v-for="item in academyList"
                                    :key="item.academy_no"
                                    :label="item.name"
                                    :value="item.academy_no"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-button
                            size="small"
                            type="primary"
                            @click="getTableData">搜索</el-button>
                    </el-col> -->
                </el-form>
            </el-row>
            <div
                class="table-wrapper add-class-wrap"
                :class="(school_id == '' || academy_no == '') ? 'table-disabled' : 'table-normal'">
                <p class="steps-3"><strong>第三步：</strong>确认信息<el-button
                    type="text"
                    class="add-class-btn"
                    :disabled="school_id == '' || academy_no == ''"
                    @click="fnAddClass">+添加班级</el-button></p>
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%;">
                    <el-table-column
                        fixed="left"
                        header-align="center"
                        align="center"
                        prop="school_name"
                        class-name="class-gray"
                        label="学校名称"/>
                    <el-table-column
                        header-align="center"
                        align="center"
                        prop="academy_name"
                        class-name="class-gray"
                        label="学院名称"/>
                    <el-table-column
                        header-align="center"
                        prop="grade"
                        label="年级">
                        <template slot-scope="scope">
                            <input
                                type="text"
                                v-model="scope.row.grade"
                                class="table-inner-input">
                        </template>
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        prop="name"
                        label="班级名称">
                        <template slot-scope="scope">
                            <input
                                type="text"
                                v-model="scope.row.name"
                                class="table-inner-input">
                        </template>
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        prop="student_count"
                        label="班级人数">
                        <template slot-scope="scope">
                            <input
                                type="number"
                                v-model="scope.row.student_count"
                                placeholder=""
                                class="table-inner-input">
                        </template>
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        prop="max_grade"
                        label="班级年限">
                        <template slot-scope="scope">
                            <input
                                type="text"
                                v-model="scope.row.max_grade"
                                class="table-inner-input">
                        </template>
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        label="操作">
                        <template slot-scope="scope">
                            <div
                                class="mass-add-del"
                                @click="fnDelClassItem(scope.row.$index)">
                                <el-button type="text">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-row>
                <el-col
                    :md="{ span: 24 }"
                    :sm="{ span: 24 }">
                    <div class="confirm-wrapper"><el-button
                        @click="fnConfirmSubmit"
                        :disabled="tableData.length == 0"
                        type="primary"
                        size="small">确认导入</el-button></div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            city_id: '',
            school_id: '',
            academy_no: '',
            school_name: '',
            academy_name: '',
            cityList:[],
            schoolList: [],
            academyList: [],
            authResult: {},
            tableData: []
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.$store.commit('SET_HEADER', [
            {
                title: "任务反馈系统",
            },
            {
                title: "班级管理"
            },
            {
                title: "新增班级"
            }
        ]);
        this.getCityList();
    },
    methods: {
        fnDelClassItem(index) {
            this.tableData.splice(index, 1);
        },
        fnSchoolChange() {

            for(let i = 0; i < this.schoolList.length; i++) {
                if(this.school_id == this.schoolList[i].school_id) {
                    this.school_name = this.schoolList[i].name;
                }
            }
            this.getAcademyList();
        },
        fnAcademyChange() {
            for(let i = 0; i < this.academyList.length; i++) {
                if(this.academy_no == this.academyList[i].academy_no) {
                    this.academy_name = this.academyList[i].name;
                }
            }
        },
        fnUploadExcelData(e) {
            let formData = new FormData();

            formData.append('file', e.target.files[0]);
            this.$post('/task/base_class%5Cget_import_content', formData, resp => {
                if (resp.code == 1) {
                    let temp = resp.data.list;

                    for(let i = 0; i < temp.length; i++) {
                        temp[i].school_name = this.school_name;
                        temp[i].academy_name = this.academy_name;
                        temp[i].grade = this.gradeFormatter(temp[i].grade);
                    }

                    this.tableData = temp;
                    console.log(temp);
                }
            });
        },
        /**
         * 跳转页面
         */
        handleRoute(name, query) {
            let obj = {
                name
            };

            if (query) {
                obj.query = query;
            }

            this.$router.push(obj);
        },
        /**
         * 获取城市列表
         */
        getCityList() {
            this.$post('/task/base_city%5Cget_simple_list', {
            }, resp => {
                if (resp.code == 1) {
                    this.cityList = resp.data.list;
                }
            });
        },
        /**
         * 获取学校列表
         */
        getSchoolList() {
            this.$post('/task/base_school%5Cget_simple_list', {
                city_id: this.city_id
            }, resp => {
                if (resp.code == 1) {
                    this.schoolList = resp.data.list;
                }
            });
        },
        /**
         * 获取学院列表
         */
        getAcademyList() {
            this.$post('/task/base_academy%5Cget_simple_list', {
                school_id: this.school_id
            }, resp => {
                if (resp.code == 1) {
                    this.academyList = resp.data.list;
                }
            });
        },
        /**
         * 更改城市
         */
        fnCityChange() {
            this.school_id = '';
            this.getSchoolList();
        },
        /**
         * 确认导入班级
         */
        fnConfirmSubmit() {
            for(let i = 0; i < this.tableData.length; i++) {
                // console.log(this.tableData[i].max_grade);
                if(Number(this.tableData[i].max_grade) <= 0 && Number(this.tableData[i].max_grade) > 5) {
                    this.$message({
                        type: 'warning',
                        message: '班级年限范围为1-5'
                    });
                    return;
                }

                if(Number(this.tableData[i].student_count) < 0) {
                    this.$message({
                        type: 'warning',
                        message: '班级人数不正确'
                    });
                    return;
                }

                this.tableData[i].grade = this.formatterGradeBack(this.tableData[i].grade);
            }
            this.$post('/task/base_class%5Cmass_add', {
                academy_no: this.academy_no,
                data: JSON.stringify(this.tableData)
            }, resp => {
                if (resp.code == 1) {
                    this.$message({
                        type: 'success',
                        message: '添加成功'
                    });
                    setTimeout(() => {
                        this.$router.push({name: 'ClassList'});
                    }, 2000);
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },
        /**
         * 手动添加班级
         */
        fnAddClass() {
            this.tableData.push({
                school_name: this.school_name,
                academy_name: this.academy_name,
                name: '',
                grade: '',
                max_grade: '',
                student_count: '',
            });
        },
        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },
        gradeFormatter(val) {
            if(val == '1') {
                return '大一';
            }else if(val == '2') {
                return '大二';
            }else if(val == '3') {
                return '大三';
            }else if(val == '4') {
                return '大四';
            }else if(val == '5') {
                return '大五';
            }else{
                return val;
            }
        },
        formatterGradeBack(val) {
            if(val == '大一') {
                return '1';
            }else if(val == '大二') {
                return '2';
            }else if(val == '大三') {
                return '3';
            }else if(val == '大四') {
                return '4';
            }else if(val == '大五') {
                return '5';
            }else{
                return val;
            }
        }
    }
};
</script>
<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
        margin-left: 10px;
    }
}
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow-y: auto;
    overflow-x: hidden;
}
.search-wrapper {
    padding: 15px;
    background-color: #fff;
}
.steps-desc-wrap{
    background: #fff;
    padding-left: 15px;
    padding-top: 15px;
    strong{
        color: #1890FF;
    }
}
.steps-3{
    padding-bottom: 15px;
    strong{
        color: #1890FF;
    }
}
.filter-item {
    margin-bottom: 15px;
    .el-form-item {
        margin-bottom: 0;
    }
    .el-autocomplete {
        width: 100%;
    }
}
.table-normal{
    flex: 1;
    background-color: #fff;
    padding: 0 15px;
    position: relative;
}
.table-disabled{
    flex: 1;
    background-color: #fff;
    padding: 0 15px;
    position: relative;
    &:after {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        cursor: not-allowed;
        background-image: none;
        background-color: rgba(255,255,255,0.7);
        border-color: #ebeef5;
        left: 0;
        top: 0;
        z-index: 999;
    }
}
.table-wrapper {

    .add-class-btn{
        float: right;
        font-size:14px;
        font-weight:400;
        color:rgba(102,102,102,1);
    }
    .el-button {
        padding: 0;
    }

    .btn-delete {
        color: #fd4d32;
        &.is-disabled {
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }
    .table-inner-input{
        outline: none;
        line-height: 20px;
        font-size: 14px;
        width: 100%;
        background: transparent;
        text-align: center;
        cursor: pointer;
    }
}
.confirm-wrapper{
    text-align: center;
    margin: 15px 0;
}
</style>
<style lang="less">
.add-class-wrap{
    margin-top: 15px;
    padding: 15px!important;
    .class-gray{
        background: #fafafa !important;
    }
}
.mass-add-del{
    text-align: center;
    .el-button--text{
        color: #999;
    }
    &:hover{
        .el-button--text{
            color: #FD4D23;
        }
    }
}
</style>


